<template>
  <div class="flex-1 overflow-hidden flex flex-col">
    <div class="flex-1">
      <ag-grid-vue
        class="ag-theme-alpine"
        style="width: 100%; height: 100%"
        :row-data="tableData"
        :column-defs="columnDefs"
        :grid-options="gridOptions"
        @gridReady="onGridReady"
      >
      </ag-grid-vue>
    </div>
    <div class="flex flex-wrap td-text pt-2 pb-2 opacity-60">
      <div v-for="(value, key) in accuracySummary" :key="key" class="mt-2" style="width: 180px;">
        <span class="pr-2">{{ ACCURACY_SUMMARY_CN_MAP[key] }}:</span>
        <span>{{ key === 'accuracyRate' ? (value * 100).toFixed(2) + '%' : value.toFixed(2) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 vue
import Vue from 'vue'
// 引入 ag-grid-vue
import { AgGridVue } from 'ag-grid-vue'
// 基础样式
import 'ag-grid-community/styles/ag-grid.css'
// 主题样式
import 'ag-grid-community/styles/ag-theme-alpine.css'
// 单元格组件
import AccurateCellRenderer from '@/views/kit/components/AccurateCellRenderer.vue'
import LuckyCellRenderer from '@/views/kit/components/LuckyCellRenderer.vue'
import KillCellRenderer from '@/views/kit/components/KillCellRenderer.vue'
import Top3GroupArrayCellRenderer from '@/views/kit/components/Top3GroupArrayCellRenderer.vue'
import judgmentBasisCellRenderer from '@/views/kit/components/judgmentBasisCellRenderer.vue'

// 引入常量
import { ACCURACY_SUMMARY_CN_MAP } from '@/utils/modules/constant'

// 垂直居中样式
const verticalCenterStyle = { display: 'flex', alignItems: 'center' }

export default {
  // 组件名称
  name: 'TableMode2',
  // 注册局部组件
  components: {
    AgGridVue,
    // eslint-disable-next-line vue/no-unused-components
    AccurateCellRenderer,
    // eslint-disable-next-line vue/no-unused-components
    LuckyCellRenderer,
    // eslint-disable-next-line vue/no-unused-components
    KillCellRenderer
  },
  // 混入的外部功能模块
  mixins: [],
  // 接收的外部传入参数
  props: {
    accuracySummary: {
      type: Object,
      default: () => ({})
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  // 定义响应式的数据属性
  data() {
    return {
      // 常量
      ACCURACY_SUMMARY_CN_MAP,
      // 表格配置
      gridOptions: {
        // 允许单元格文本选择
        enableCellTextSelection: true,
        // 行高
        // rowHeight: 84,
        rowHeight: 72,
        // 默认布局，允许滚动条
        domLayout: 'normal'
      },
      // 列
      columnDefs: [
        // 设置单元格垂直居中
        {
          headerName: 'Date',
          field: 'time',
          width: 128,
          sort: 'desc',
          cellStyle: {
            ...verticalCenterStyle,
            color: '#97a8be'
          }
        },
        {
          headerName: 'Special',
          field: 'number',
          width: 128,
          cellStyle: verticalCenterStyle
        },
        {
          headerName: 'Accuracy',
          field: 'accuracy',
          width: 128,
          cellStyle: verticalCenterStyle,
          cellRenderer: (params) => {
            const vm = new Vue({
              render(h) {
                return h(AccurateCellRenderer, {
                  props: { params }
                })
              }
            }).$mount()
            return vm.$el
          }
        },
        // {
        //   headerName: 'Kill Group',
        //   field: 'kill_group_names',
        //   width: 320,
        //   cellStyle: verticalCenterStyle,
        // },
        // 
        // 判断依据
        // {
        //   headerName: 'JudgmentBasis',
        //   field: 'judgmentBasis',
        //   width: 1400,
        //   cellStyle: verticalCenterStyle,
        //   cellRenderer: (params) => {
        //     const vm = new Vue({
        //       render(h) {
        //         return h(judgmentBasisCellRenderer, {
        //           props: { params }
        //         })
        //       }
        //     }).$mount()
        //     return vm.$el
        //   }
        // },
        // 原calcA的前三条数据
        // {
        //   headerName: 'Top3',
        //   field: 'top3_group_array',
        //   width: 240,
        //   cellStyle: verticalCenterStyle,
        //   cellRenderer: (params) => {
        //     const vm = new Vue({
        //       render(h) {
        //         return h(Top3GroupArrayCellRenderer, {
        //           props: { params }
        //         })
        //       }
        //     }).$mount()
        //     return vm.$el
        //   }
        // },        
        // {
        //   headerName: 'Kill',
        //   field: 'kill_array',
        //   width: 430,
        //   cellStyle: verticalCenterStyle,
        //   cellRenderer: (params) => {
        //     const vm = new Vue({
        //       render(h) {
        //         return h(KillCellRenderer, {
        //           props: { params }
        //         })
        //       }
        //     }).$mount()
        //     return vm.$el
        //   }
        // },
        // {
        //   headerName: 'Lucky',
        //   field: 'lucky_array',
        //   width: 430,
        //   cellStyle: verticalCenterStyle,
        //   cellRenderer: (params) => {
        //     const vm = new Vue({
        //       render(h) {
        //         return h(LuckyCellRenderer, {
        //           props: { params }
        //         })
        //       }
        //     }).$mount()
        //     return vm.$el
        //   }
        // }
      ]
    }
  },
  methods: {
    // 网格表格初始化事件
    onGridReady(params) {
      this.gridApi = params.api
      this.gridColumnApi = params.columnApi

      // 调整列宽以适应容器
      this.gridApi.sizeColumnsToFit()

      // console.log('gridApi', this.gridApi)

      // 窗口大小变化时调整表格宽度
      window.addEventListener('resize', () => {
        this.gridApi.sizeColumnsToFit()
      })
    }
  }
}
</script>
